<template>
<p>使用 <code>format</code> 属性来控制时间格式 (小时以及分钟)。</p>
<p>在 <a href="https://day.js.org/docs/zh-CN/display/format" class="vp-link" target="_blank" rel="noreferrer">这里<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> 查看 Day.js 支持的 format 参数。</p>
<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>请一定要注意传入参数的大小写是否正确</p></div>
  <el-time-select
    v-model="value"
    style="width: 240px"
    start="00:00"
    step="00:30"
    end="23:59"
    placeholder="Select time"
    format="hh:mm A"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>